<!--
 * @Author: Shususumu
 * @Date: 2020-11-05 15:53:09
 * @LastEditTime: 2020-11-05 17:00:44
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>面试题2</title>
</head>
<style>
    .bcolor {
        width: 750px;
        height: 550px;
        background-image: linear-gradient(to top right, #FC7EAA, #FFFCF8);
        margin: auto;
        border-radius: 10px;
        position: relative;
    }
    
    .login {
        width: 390px;
        height: 400px;
        background-color: #fff;
        border-radius: 15px;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        box-sizing: border-box;
        padding: 30px;
    }
    
    .login>* {
        margin-top: 10px;
    }
    
    h2,
    p {
        text-align: center;
    }
    
    input {
        border: 0;
    }
    
    .username input,
    .email input {
        width: 100%;
        height: 40px;
        border-radius: 10px;
        background-color: #eee;
    }
    
    .name>div {
        display: inline-block;
    }
    
    .fname input,
    .lname input {
        width: 161px;
        height: 40px;
        border-radius: 0 10px 10px 0;
        background-color: #eee;
    }
    
    .fname input {
        border-radius: 10px 0 0 10px;
    }
    
    .button {
        width: 100%;
        height: 40px;
        border-radius: 10px;
        background-color: #4C99FC;
        text-align: center;
        line-height: 40px;
        color: #fff;
    }
    
    .button:hover {
        cursor: pointer;
    }
    
    .right {
        float: right;
        margin-right: 10px;
    }
</style>

<body>
    <div class="bcolor">
        <div class="login">
            <h2>Create account</h2>
            <p>Already have an account?<a href="">Sign in</a></p>
            <div class="username"><input type="text" placeholder="Username"></div>
            <div class="name">
                <div class="fname"><input type="text" placeholder="First name"></div>
                <div class="lname"><input type="text" placeholder="Last name"></div>
            </div>
            <div class="email"><input type="text" placeholder="E-mail"></div>
            <div class="button">Sign up
                <div class="right">→</div>
            </div>
            <div class="agree"><input type="checkbox" name="" id="">I have read and agree to The <a href="">Terms of Service</a></div>
        </div>
    </div>
</body>

</html>